<template>
	<view class="wrapper">
		<scroll-view class="scroll-Y" scroll-y="true">

			<camera v-if="cameraMode" device-position="back" flash="off" @error="error"
				style="width: 100%; height: 300px;"></camera>

			<image v-else :src="src" mode="aspectFit"></image>

			<view class="btns">
				<u-button class="btn-img" @click="chooseImg">选择图片</u-button>
				<u-button class="btn-camera" @click="takePhoto">拍照</u-button>
			</view>

			<u-button class="btn-ocr" type="default" @click="img2OcrResult">识别文字</u-button>

			<!--  -->
			<text class="result"> {{ ocrResult ? ocrResult : '请上传或拍摄岗位描述...' }} </text>
			<!-- <lzcOCR v-if="dataObj" :dataObj="dataObj" @start="onOcrStart" @end="onOcrEnd" /> -->

			<u-button class="btn-start" type="primary" @click="startInterview">开始面试</u-button>

		</scroll-view>
	</view>
</template>

<script>
	import {
		getOcrResult
	} from "@/utils/ocr_util.js"

	import {
		mapState
	} from "vuex"

	export default {
		name: "image-chooser",

		data() {
			return {
				// src: "/static/uniapp2.png",
				cameraMode: false,
				ocrResult: "",
				src:'https://lekuzhima.club/imgs/uniapp2.png'
			};
		},

		computed: mapState([
			"baseUrl"
		]),

		methods: {
			chooseImg() {
				this.cameraMode = false;
				uni.chooseImage({
					success: res => {
						this.src = res.tempFilePaths[0]
					}
				})
			},

			takePhoto() {
				if (this.cameraMode) {
					console.log("take photo");
					const ctx = uni.createCameraContext();
					ctx.takePhoto({
						quality: 'high',
						success: (res) => {
							this.cameraMode = false
							this.src = res.tempImagePath
						}
					});
				} else {
					this.cameraMode = true
				}
			},

			error(e) {
				console.log(e.detail);
			},

			img2OcrResult() {
				getOcrResult(this.src, ret => this.ocrResult = ret)
			},

			startInterview(e) {
				uni.navigateTo({
					url: "/pages/exam/exam"
				})
			}

		}
	}
</script>

<style lang="scss">
	$main-width: 600rpx;

	.wrapper {
		height: calc(100vh - 140rpx);
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		padding: 15rpx;
		padding-bottom: 100rpx;

		.scroll-Y {
			height: calc(100% - 20rpx);

			image {
				width: 100%;
				height: $main-width;
			}

			.btns {
				display: flex;
				width: 100%;
				margin-top: 10rpx;

				u-button {
					// width: $main-width;
					// margin: 20rpx 0;
					flex: 1;
				}

				.btn-camera {
					margin-left: 10rpx;
				}
			}

			.btn-ocr {
				display: block;
				margin-top: 10rpx;
			}

			.result {
				display: block;
				width: 100%;
				min-height: $main-width;
				border-radius: 5rpx;
				background-color: #000;
				color: white;
				padding: 15rpx;
				margin-top: 10rpx;
				// margin-bottom: 50rpx;
			}

			.btn-start {
				display: block;
				// width: calc(100% - 0rpx);
				margin: 30rpx auto;
			}

		}
	}
</style>